import React, { useState } from "react";
import { MenuTree } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

export default function MenuTreePanel() {
  const operators = [
    { value: 1, label: "全部" },
    { value: 2, label: "组织机构" },
  ];

  const data = [
    {
      key: "1",
      title: "1-风险可视",
      children: [
        {
          key: "2",
          title: "2-综合场景",
          disabled: true,
          children: [
            {
              key: "3",
              title: "3-攻击链",
              multiple: true,
              disabled: true,
            },
            {
              key: "4",
              title: "4-站点防护",
              operators: [
                { value: "edit", label: "编辑" },
                { value: "delete", label: "删除" },
              ],
            },
            {
              key: "13",
              title: "13-站点防护",
              operators: [
                { value: "edit", label: "编辑" },
                { value: "delete", label: "删除" },
              ],
            },
          ],
        },
        {
          key: "5",
          title: "5-威胁检测",
          children: [
            {
              key: "6",
              title: "6-Web 攻击",
              // operators: operators,
            },
          ],
        },
      ],
    },
    {
      key: "7",
      title: "7-风险监测",
      children: [
        {
          key: "8",
          title: "8-告警中心",
          // operators,
        },
        {
          key: "12",
          title: "12-监控",
          // operators,
        },
      ],
    },
    {
      key: "9",
      title: "9-日志检索",
      operators,
    },
    {
      key: "10",
      title: "10-安全运营",
      disabled: true,
      children: [
        {
          key: "11",
          title: "11-作战室",
          // disabled: true,
          // operators,
        },
      ],
    },
  ];

  const [value, setValue] = useState([
    // { key: "3" },
    { key: "4" },
    { key: "8" },
    { key: "9", checkedOperators: [2] },
    { key: "11" },
  ]);
  const [checked, setChecked] = useState([]);

  const v = {
    title: "MenuTree 组件",
    content: {
      title: "代码演示",
      children: [
        {
          title: "测试",
          component: (
            <>
              <MenuTree
                columnTitle={["一级权限", "二级权限", "三级权限"]}
                treeData={data}
                onChange={(v) => {
                  console.log(v);
                  setValue(v);
                }}
                // disabled={true}
                value={value}
              />
            </>
          ),
          codeSnippet: `
import { MenuTree } from "@ct0/ui";

<MenuTree
  columnTitle={["一级权限", "二级权限", "三级权限"]}
  treeData={data}
  onChange={(v) => {
    console.log(v);
    setValue(v);
  }}
  // disabled={true}
  value={value}
/> 
          `,
        },
      ],
    },
    componentApi: [
      {
        param: "treeData",
        required: true,
        description: "结构描述",
        type: "MenuTreeDataType",
      },
      {
        param: "value",
        description: "选中的节点",
        type: "MenuTreeValueType",
        default: "[]",
      },
      {
        param: "columnTitle",
        description: "表格列标题",
        type: "Array<string>",
      },
      {
        param: "disabled",
        description: "是否禁用",
        type: "boolean",
      },
      {
        param: "onChange",
        description: "点击节点复选框/操作时触发的回调函数",
        type: "(checkedNodes:MenuTreeDataType,allNodes:MenuTreeDataType)=>void",
      },
    ],
  };

  return <PanelTemplate {...v} />;
}
